<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Dome.css">
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>操作</th>
        </tr>
        <tr v-for="(obj,index) in arr">
            <td>{{obj.userId}}</td>
            <td>{{obj.userName}}</td>
            <td>{{obj.userAge}}</td>
            <td><button @click="del(index)">删除</button></td>
        </tr>
        <tr>
            <td colspan="4"><button @click="clear">清空</button></td>
        </tr>
    </table>
    <h3>添加</h3>
    姓名：<input type="text" v-model="inUserName"><br>
    年龄：<input type="text" v-model="inUserAge"><br>
    <button @click="add">添加</button>
</div>

<script src="../../../../vue.global.js"></script>
<script src="Dome.js"></script>
<!--<script>-->
<!--    Vue.createApp({-->
<!--        data() {-->
<!--            return{-->
<!--                arr:[-->
<!--                    {-->
<!--                        userId:1,-->
<!--                        userName:'张三',-->
<!--                        userAge:20-->
<!--                    },{-->
<!--                        userId:2,-->
<!--                        userName:'李四',-->
<!--                        userAge:21-->
<!--                    },{-->
<!--                        userId:3,-->
<!--                        userName:'王五',-->
<!--                        userAge:22-->
<!--                    }-->
<!--                ],-->
<!--                inUserName : '',-->
<!--                inUserAge : ''-->
<!--            }-->
<!--        },-->
<!--        methods:{-->
<!--            add(){-->
<!--                let userId = 0;-->
<!--                if(this.arr.length === 0){-->
<!--                    userId = 1;-->
<!--                }else {-->
<!--                    userId = this.arr[this.arr.length - 1].userId + 1;-->
<!--                }-->
<!--                this.arr.push({-->
<!--                    userId:userId,-->
<!--                    userName:this.inUserName,-->
<!--                    userAge:this.inUserAge-->
<!--                });-->
<!--                this.inUserName = ''-->
<!--                this.inUserAge = ''-->
<!--            },-->
<!--            del(index){-->
<!--                this.arr.splice(index,1);-->
<!--                for (let i = index; i < this.arr.length; i++) {-->
<!--                    this.arr[i].userId &#45;&#45;;-->
<!--                }-->
<!--            },-->
<!--            clear() {-->
<!--                this.arr.splice(0,this.arr.length);-->
<!--            }-->
<!--        }-->
<!--    }).mount('#app')-->
<!--</script>-->
</body>
</html>